<!--
 * @Author: your name
 * @Date: 2021-12-16 10:01:40
 * @LastEditTime: 2021-12-16 11:09:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-admin-template\src\pages\User.vue
-->
<template>
  <div class="user_container">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="12">
        <el-form :model="params" inline size="small">
          <el-form-item>
            <el-input v-model="params.username"></el-input>
          </el-form-item>
           <el-form-item>
            <el-button>搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" style="text-align:right">
        <el-button type="primary" size="small" @click="toAddHandler">添加</el-button>
      </el-col>
    </el-row>
    <!--/第一行结束  -->
    <!-- 第二行 -->
    <el-table size="small" :data="users" stripe>
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="姓名" prop=""></el-table-column>
      <el-table-column label="性别" prop=""></el-table-column>
      <el-table-column label="手机号" prop=""></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="toEditHandler(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="toDelHandler(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /第二行结束 -->
    <!-- 第三行 -->
    <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    <!-- /第三行结束 -->
    <!-- 第四行模态框 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="form"  label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="visible = false"  size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /第四行结束 -->
  </div>
</template>
<script>
export default {
  // 1. 数据，变量： 函数，并且返回一个对象，声明的变量都要放在返回的对象中。
  data(){
    return {
      title:"",
      visible:false,
      params:{},
      form:{},
      users:[{id:1,username:"terry"},{id:2,username:"larry"},{id:3,username:"tom"}]
    }
  },
  // 2. 方法
  methods:{
    toAddHandler(){
      this.visible = true;
      this.form = {}
      this.title = "新增用户"
    },
    toEditHandler(row){
      this.visible =true;
      this.form = row;
      this.title = "修改用户"
    },
    toDelHandler(row){
      alert(row.id);
    }
  }
}
</script>
<style scoped>
.user_container {
  padding:1em .5em;
}
</style>